<template>
  <v-btn aria-label="复制歌词" icon color="primary" variant="text" @click="onCopy">
    <CopyIcon :size="20" :color="iconColor"></CopyIcon>
  </v-btn>
</template>

<script>
import CopyIcon from "../icon/home/复制.vue";

export default {
  name: "CopyText",
  props: {
    text: {
      type: String,
      default: "",
    },
    iconColor: {
      type: String,
      default: undefined,
    },
  },
  components: {
    CopyIcon,
  },
  methods: {
    async onCopy() {
      this.copyText(this.text);
      try {
        await navigator.clipboard.writeText(this.text);
        // alert("复制成功");
        this.$toast.success("复制成功");
      } catch (e) {
        this.copyText(this.text);
        this.$toast.success("复制成功");
        // alert("复制成功");
      }
    },
    copyText(text) {
      const copyFrom = document.createElement("textarea");
      copyFrom.setAttribute("style", "position:fixed;opacity:0;top:100px;left:100px;");
      copyFrom.value = text;
      document.body.appendChild(copyFrom);
      copyFrom.select();
      document.execCommand("copy");
      const copied = document.createElement("div");
      copied.setAttribute("class", "copied");
      copied.appendChild(document.createTextNode("Copied to Clipboard"));
      document.body.appendChild(copied);
      setTimeout(() => {
        document.body.removeChild(copyFrom);
        document.body.removeChild(copied);
      }, 1500);
    },
  },
};
</script>

<style></style>
